<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>My Cesium App</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="Cesium/Cesium.js"></script>
    <script src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <style>
        @import url(Cesium/Widgets/widgets.css);
        html, body, #cesiumContainer {
            height: 100%; margin: 0; padding: 0; overflow: hidden;
        }
    </style>
</head>
<body>
<div >
    <div id="button">
        <input type="button" class="myButton" id="networkToggle" value="Go Offline" style="width: 100%" />
    </div>
    <div id="buttons">
        <div id="buttonWrapperLeft">
            <button class="myButton left" id="id">Load Data</button>
            <input id="input" type="file"  name="input" style="display:none;" onchange="fileLoaded()"/>
        </div>
        <div id="buttonWrapperRight">
            <button class="myButton right" id="camera">Take Photo</button>
        </div>
    </div>
    <div id="cesiumWrapper">
        <div id="cesiumContainer"></div>
    </div>
</div>
<script>
    document.getElementById('networkToggle').onclick = function () {
        var networkToggle = document.getElementById('networkToggle');
        viewer.destroy();
        if (networkToggle.value === 'Go Online') {
            viewer = new Cesium.Viewer('cesiumContainer');
            networkToggle.value = 'Go Offline';
        } else {
            viewer = new Cesium.Viewer('cesiumContainer', {
                imageryProvider : Cesium.createTileMapServiceImageryProvider({
                    url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
                }),
                baseLayerPicker : false,
                geocoder : false
            });
            networkToggle.value = 'Go Online';
        }
    };

    document.getElementById('id').onclick = function () {
        document.getElementById('input').click();
    };

    document.getElementById('camera').onclick = function() {
        navigator.camera.getPicture(cameraSuccess, cameraError, cameraOptions);
    };

    var image;
    var fr = new FileReader();
    var viewer = new Cesium.Viewer('cesiumContainer');
    var options = {
        camera : viewer.scene.camera,
        canvas : viewer.scene.canvas
    };
    var cameraOptions = {
        quality : 100,
        targetWidth : 100,
        targetHeight : 100

    };

    fr.onloadend = function () {
        var extension = Cesium.getExtensionFromUri(document.getElementById('input').value);

        switch (extension) {
            case 'geojson':
                viewer.dataSources.add(Cesium.GeoJsonDataSource.load(this.result));
                break;
            case 'topojson':
                viewer.dataSources.add(Cesium.GeoJsonDataSource.load(this.result));
                break;
            case 'czml':
                viewer.dataSources.add(Cesium.CzmlDataSource.load(this.result));
                break;
            case 'kml':
                viewer.dataSources.add(Cesium.KmlDataSource.load(this.result, options));
                break;
            case 'kmz':
                viewer.dataSources.add(Cesium.KmlDataSource.load(this.result, options));
                break;
            case 'gltf':
                viewer.trackedEntity = viewer.entities.add({
                    position: Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 5000),
                    model: {
                        uri: this.result
                    }
                });
                break;
            default:
                alert('File type [' + extension + '] is not supported.')
        }
    };

    function fileLoaded() {
        var file = document.getElementById('input').files[0];
        fr.readAsDataURL(file);
    }
    
    function cameraSuccess(imageURI) {
        image = imageURI;
        navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError);
    }

    function cameraError() {
        alert('Unable to load camera.');
    }

    function geolocationSuccess(position) {
        viewer.entities.removeAll();
        viewer.entities.add({
            position : Cesium.Cartesian3.fromDegrees(position.coords.longitude, position.coords.latitude),
            billboard : {
                image : image,
                width : 100,
                height : 100
            }
        });
    }

    function geolocationError() {
        alert('Unable to get your location.');
    }
</script>
</body>
</html>
